<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>
<c:set var="contextPath" value="<%=basePath%>" />
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<title>${tie4.tile}</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
<!--CSS-->
<link rel="stylesheet" href="${ctx}/style/reset.css">
<link rel="stylesheet" href="${ctx}/style/style.css">
<link rel="stylesheet" href="${ctx}/style/layout.css">
<link href="${ctx}/style/prettyPhoto.css" rel="stylesheet" />
<link href="${ctx}/style/bmap.css" rel="stylesheet" />
<!--JS-->
<script type="text/javascript" src="${ctx}/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery.easing.js"></script>
<script type="text/javascript" src="${ctx}/js/switcher.js"></script>
<script type="text/javascript" src="${ctx}/js/scripts.js"></script>
<script type="text/javascript" src="${ctx}/js/sprites.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="${ctx}/js/bgStretch.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery.animate-colors-min.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery.form.js"></script>
<!--Form & Map
<script type="text/javascript" src="${ctx}/js/forms.js"></script>-->
<!--[if lt IE 9]>
  	<script type="text/javascript" src="http://www.dzxt.cn/templates/front_templ/wedding_theme_010/js/html5.js"></script>
    <link rel="stylesheet" href="http://www.dzxt.cn/templates/front_templ/wedding_theme_010/css/ie.css" type="text/css" media="all">
  <![endif]-->
<!--[if lt IE 8]>
		<div style=' clear: both; text-align:center; position: relative;'>
			<a href="http://windows.microsoft.com/zh-cn/internet-explorer/download-ie"><img src="${ctx}/images/warning_bar_0000_us.png" border="0" height="42" width="820" alt="您的IE浏览器版本太低，请把您的IE浏览器版本升级浏览出最佳效果谢谢！" /></a>
		</div>
	<![endif]-->
 <script type="text/javascript">
  function block(oEvent){
   if(window.event)
    oEvent=window.event;
   if(oEvent.button==2)
    alert("禁止使用右键");
  }
  document.onmousedown=block;
 </script>
</head>
<body>
<div class="extra">
  <div class="page_spinner"></div>
  <span class="gall_spinner right"></span>
  <div id="bgStretch"><img src="${ctx}/images/bg_pic_1.jpg" alt=""></div>
  <div class="main"> 
    <!--header -->
    <header>
      <h1><a href="#!/page_about" id="logo">${tie4.conter}</a></h1>
      <nav class="menu">
        <ul id="menu">
          <li><a href="#!/page_main" class="ex-1"><span class="mText">请柬</span></a></li>
          <li><a href="#!/page_about" class="ex-1"><span class="mText">真诚的邀请</span></a></li>
          <li><a href="#!/page_reservation" class="ex-1"><span class="mText">爱的映像</span></a></li>
          <li><a href="#!/page_menu" class="ex-1"><span class="mText">我们的感言</span></a></li>
          <li><a href="#!/page_location" class="ex-1"><span class="mText">婚礼地点</span></a></li>
          <li><a href="#!/page_leave" class="ex-1"><span class="mText">亲友留言</span></a></li>
        </ul>
      </nav>
      <div class="clear"></div>
    </header>
    <!--header end-->
    <div class="zigzag"></div>
    <div class="bgSelector right">
      <nav class="bgNav">
        <ul>
          <li class="active"><a href="${ctx}/images/bg_pic_1.jpg"><span>1</span></a></li>
        </ul>
      </nav>
    </div>
    <div class="splashPad"> </div>
    <!--content -->
    <article id="content">
      <ul>
        <li id="page_main"> </li>
        <li id="page_about" class="contentPad">
          <div class="wrapper">
            <section class="patternPad">
              <article>
                  ${tie1.conter}
                <div class="clear"></div>
              </article>
              <div class="zigzagPad"></div>
            </section>
          </div>
        </li>
        <li id="page_reservation" class="contentPad">
          <div class="wrapper">
            <section class="patternPad">
              <article>
                <h2>爱的映像
                                </h2>
                <h3>Love Picture</h3>
              </article>
              <ul class="overview gallery" style=" overflow: hidden; height: 280px;">
                <c:forEach items="${tieList}" var="love" varStatus="i">
                   <li style="float:left;width:260px; text-align: center"><a href="${ctx}/UserFiles/${love.images}" rel="prettyPhoto[gallery1]"><img src="${ctx}/UserFiles/${love.images}"  style="max-width:248px;max-height:280px" /></a></li>
                </c:forEach>
              </ul>
              <div class="zigzagPad"></div>
            </section>
          </div>
        </li>
        <li id="page_menu" class="contentPad">
          <div class="wrapper">
            <section class="patternPad">
              <article class="col5" style="width:750px;">
              ${tie2.conter}
              </article>
              <div class="zigzagPad"></div>
            </section>
          </div>
        </li>
        <li id="page_location" class="contentPad">
          <div class="wrapper">
            <section class="patternPad">
              <article class="col3">
               ${tie3.conter}
              </article>
              <article class="col6">
                <h2>签到处</h2>
                <h3>Message</h3>
                <form method="post" name="messageForm" id="messageForm" action="${ctx}/pages/web/addWeb.action">
                <input value="11" name="tie.type" id="type" type="hidden">
                  <fieldset class="">
                    <div class="block">
                      <label class="name"> <span class="bg">
                        姓名：<input type="text" class="input"  placeholder="姓名:"  name="tie.name" id="t_name" value="${user.userName}" >
                        </span> </label>
                       <label class="name"> <span class="bg">
                        手机：<input type="text" class="input"  name="tie.phone" placeholder="手机:"  id="t_phone" value="${user.phone}">
                        </span> </label>
                      <label class="email" style="width:400px; height:50px; line-height:50px; font-size:12px;"> <span class="textStyle3">是否到场参加婚礼
                        <input id="t_status" name="tie.status" type="radio" value="0">
                        是
                        <input id="t_status" name="tie.status" type="radio" value="1">
                        否</span> </label>
                    </div>
                    <div class="block">
                      <label class="message"> <span class="bg">
                       留言：<textarea rows="1" cols="2"  name="tie.conter" id="t_conter" placeholder="留言:"></textarea>
                        </span> </label>
                    </div>
                    <div class="clear"></div>
                    <div class="formBtn"> <input class="but" value="" type="submit"> </div>
                    <p id="bi_msg" style="font-size:12px;margin-top:5px;color:red;text-align:right;padding-right:5px"></p>
                  </fieldset>
                </form>
              </article>
              <div class="zigzagPad"></div>
            </section>
          </div>
        </li>
        
        <li id="page_leave" class="contentPad">
          <div class="wrapper">
            <section class="patternPad">
              <article class="col3">
                <h2>亲友留言</h2>
                <h3>Leave a Message</h3>
              </article>
              <article class="col5" style="width:800px; height: 300px; overflow-y:scroll; font-size: 13px; line-height: 40px; text-indent: 2%;  #">
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <c:forEach items="${leaveList}" var="leave" varStatus="i">
				   <tr <c:if test="${i.count%2!=0}"> style="background-color:#E7E7E7"</c:if> >
				    <td><strong>亲友姓名：</strong>${leave.name}</td>
				    <td><strong>祝福时间：</strong>${leave.datetime}</td>
				  </tr>
				  <tr style="border-bottom: 1px #ddd solid; <c:if test="${i.count%2!=0}"> background-color:#E7E7E7</c:if>" >
				    <td colspan="2"><strong>祝福内容：</strong>${leave.conter}</td>
				  </tr>
			 </c:forEach>
			</table>

              </article>
              <div class="zigzagPad"></div>
            </section>
          </div>
        </li>
        
        
      </ul>
    </article>
    <!--content end--> 
  </div>
</div>
<!--footer -->
<footer>
  <div class="privacy" style="line-height:20px">  <div style="display:inline;">
    <object type="application/x-shockwave-flash"
      data="${ctx}/images/dewplayer-mini.swf?mp3=${ctx}/images/couldThisBeLove.mp3&amp;autostart=1&amp;autoreplay=1" width="19" height="20"
      id="dewplayer-mini">
      <param name="wmode" value="transparent">
      <param name="movie"
        value="${ctx}/images/dewplayer-mini.swf?mp3=${ctx}/images/couldThisBeLove.mp3&amp;autostart=1&amp;autoreplay=1">
      <embed src="${ctx}/images/dewplayer-mini.swf?mp3=${ctx}/images/couldThisBeLove.mp3&amp;autostart=1&amp;autoreplay=1" width="20"
        height="20" wmode="transparent"></embed>
    </object>
  </div>
  </div>
  <!-- {%FOOTER_LINK} --> 
</footer>
<!--footer end--> 

<script>
$(window).load(function() { 
  $('.page_spinner').delay(250).fadeOut(800);
  $('body').css({overflow:'visible'});
  
})
</script>

<script>

function loadAjaxForm(){
 var options = {
			dataType:"json",
			type:"post",
			beforeSubmit:function (arr, $form, options){
				    var name = $('#t_name').val();
				    var phone = $('#t_phone').val();
				    var conter = $('#t_conter').val();
				    var status = $('input:radio[id="t_status"]:checked').val();			    
				if($.trim(name)==""){
					alert("请填写姓名");
					return false;
				}else if($.trim(phone)==""){
					alert("请填写手机号");
					$("#adName").focus();
					return false;
				}else if(status==null){
				    alert("请选择是否到达现场");
					return false;
				}else if($.trim(conter)==""){
					alert("请填写留言");
					return false;
				}
			},
			success: function(data) {
			   if(data=="1"){
			   	      alert("添加成功!");
			  		  $('#bi_msg').show();
				      $('#bi_msg').html("回执成功");
				      setTimeout(function (){
				      $('#bi_msg').fadeOut();
				      }, 3000);
					$('#t_conter').val("");
					$("#t_status").attr("checked",'');
			   }else{
			   		alert("添加失败!");
			   }
			}
		}; 
		$('#messageForm').ajaxForm(options);
      
  
  var biz_name = '';
  var biz_url = '';
  $("a[rel^='prettyPhoto']").prettyPhoto({social_tools:'<a href="' + biz_url + '" target="_blank" style="float:left;color:white;font-size:12px;text-decoration:none;margin-top:3px;">' + biz_name + '</a>',animation_speed:'normal',theme:'dark_square',slideshow:5000, autoplay_slideshow: false});
}


$(document).ready(function() {
  loadAjaxForm();
});
</script>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<script type="text/javascript">
var map = new BMap.Map("container");
map.enableScrollWheelZoom();

var x,y;
var marker = '';

$(function (){
    map.centerAndZoom(new BMap.Point(116.429996, 39.975119), 13);
    map.addControl(new BMap.NavigationControl());  

    x = 116.429996;
    y = 39.975119;
    map.removeOverlay(marker);
    var pt = new BMap.Point(x, y);
    marker = new BMap.Marker(pt); 
    map.addOverlay(marker); 
});

</script>
<div style="display:none"> 
  <script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F0b49c04696fdc8117195c0732c080ea4' type='text/javascript'%3E%3C/script%3E"));
</script> 
</div>
</body>
</html>